<template>
  <div class="s-body">
    <a-card bordered class="box-content">
      <!-- <div class="head-title">
				<a-space>
					<template v-for="item in routerList" :key="item.name">
						<a-button @click="goPage(item)">{{ item?.meta?.title }}</a-button>
					</template>
				</a-space>
			</div> -->
      <RouterView v-slot="{ Component }">
        <template v-if="Component">
          <Transition mode="out-in" appear>
            <KeepAlive>
              <Suspense>
                <!-- 主要内容 -->
                <component :is="Component"></component>
                <!-- 加载中状态 -->
                <template #fallback> 正在加载... </template>
              </Suspense>
            </KeepAlive>
          </Transition>
        </template>
      </RouterView>
      <h2>切换主题</h2>
      <template v-for="item in colorList" :key="item.key">
        <div class="color-box" :style="{ background: item.color }" @click="toggleTheme(item.code)"> {{ item.key }}</div>
      </template>
      <div class="box">1111</div>
      <a-button type="primary">点击</a-button>
      <a-rate :value="3" allow-half />
    </a-card>
  </div>
</template>
<script setup>
  import { useRouter } from 'vue-router';
  import { ref, onMounted } from 'vue';
  import { switchTheme, initTheme } from '@/utils/theme';
  import { useThemeStore } from '@/stores/theme'
  const themeStore = useThemeStore()
  // 主题切换逻辑
  const toggleTheme = (code) => {
    const newTheme = code;
    themeStore.changePrimaryColor(code);
  };
  // 初始化主题
  onMounted(() => {
    const savedColor = localStorage.getItem('THEME_COLOR')
    if (savedColor) themeStore.changePrimaryColor(savedColor)
  })
  // // 初始化主题
  // onMounted(() => {
  //   initTheme();
  // });
  const colorList = [
    {
      key: '薄暮',
      color: '#F5222D',
      code: 'bomu'
    },
    {
      key: '火山',
      color: '#FA541C',
      code: 'huoshan'
    },
    {
      key: '日暮',
      color: '#FAAD14',
      code: 'rimu'
    },
    {
      key: '明青',
      color: '#13C2C2',
      code: 'mingqing'
    },
    {
      key: '极光绿',
      color: '#52C41A',
      code: 'jiguang'
    },
    {
      key: '拂晓蓝',
      color: '#1890FF',
      code: 'fuxiao'
    },
    {
      key: '极客蓝',
      color: '#2F54EB',
      code: 'jike'
    },
    {
      key: '酱紫',
      color: '#722ED1',
      code: 'jiangzi'
    }
  ];
  const { push, options } = useRouter();
  console.log('options', options);
  const routerList = [];
  const goPage = (item) => {
    push({ name: item.name });
  };
</script>
<style lang="less" scoped>
  .box-content {
    width: 100%;
    height: calc(100vh - 40px);
    .head-title {
      width: 100%;
      margin-bottom: 20px;
    }
    .box {
      width: 200px;
      height: 200px;
      background: var(--primary-color);
      color: var(--text-color-dark);
    }
    .color-box {
      width: 80px;
      height: 50px;
      border-radius: 10px;
      line-height: 50px;
      text-align: center;
      display: inline-block;
      margin-right: 10px;
      color: #fff;
    }
  }
</style>
